<script setup lang="ts">
import { last } from 'lodash-es'
import { reactive, computed } from 'vue'
import {
  ElButton,
  ElForm,
  ElRow,
  ElInput,
  ElInputNumber,
  ElCascader,
  ElRadioGroup,
  ElRadio
} from 'element-plus'
// import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import {
  createSysMenusApi,
  updateSysMenusApi,
  getSysMenusListApi,
  getSysMenusDetailApi
} from '@/api/sys-menu'
import { SysMenu } from '@/api/sys-menu/types'
import { ContentDetailWrap } from '@/components/ContentDetailWrap'
import { FormItem } from '@/components/Form'
import { useValidator } from '@/hooks/web/useValidator'
import { useCreate } from '@/hooks/web/useCreate'
import { useRoute } from 'vue-router'
import { onMounted } from 'vue'

const { push } = useRouter()

const back = () => {
  push('/system/sys-menu')
}

const { required } = useValidator()

const route = useRoute()
const routeParams = computed(() => route.params)

const instance: SysMenu = reactive(new SysMenu())

const { elFormRef, openMode, save, loading } = useCreate({
  instance,
  route,
  afterSave: back,
  preSave: () => {
    instance.parent_code = last(instance.parent_codes)
  },
  createApi: createSysMenusApi,
  updateApi: updateSysMenusApi
})

const rules = reactive({
  parent_codes: [required('请选择上级菜单')],
  menu_type: [required('请选择菜单类型')],
  code: [required('请填写代码')],
  title: [required('请填写菜单名称')],
  sequence: [required('请填写序号')]
})

const title = computed(() => {
  return openMode.value === 'CREATE' ? '添加菜单' : '编辑菜单'
})

defineOptions({
  name: 'SysMenuAdd'
})

const menuOptions = reactive([])
let menus = {
  value: 0,
  label: '根目录'
}

const generateMenus = (root, children) => {
  if (children) {
    root.children = children.map((c) => ({
      value: c.code,
      label: c.title,
      subitems: c.children
    }))

    for (const child of root.children) {
      generateMenus(child, child.subitems)
    }
  }
}

onMounted(async () => {
  await getSysMenusListApi({}).then((res) => {
    generateMenus(menus, res.data.rows)
    Object.assign(menuOptions, [menus])
  })

  if (openMode.value === 'UPDATE') {
    const { data } = await getSysMenusDetailApi(routeParams.value.id as string)
    instance.init(data)
    const code = (instance.parent_code || '').toString()
    instance.parent_codes = [0]
    if (code.length === 4) {
      instance.parent_codes.push(Number(code.substring(0, 1)))
      instance.parent_codes.push(Number(code))
    } else {
      instance.parent_codes.push(Number(code))
    }
  }
})
</script>

<template>
  <ContentDetailWrap :title="title" @back="back">
    <template #right>
      <ElButton type="primary" :loading="loading" @click="save"> 保存 </ElButton>
    </template>

    <ElForm ref="elFormRef" :model="instance" label-width="100px" :rules="rules">
      <ElRow class="max-w-600px ml-auto mr-auto">
        <FormItem :col-props="{ span: 24 }" label="上级菜单" prop="parent_codes">
          <ElCascader
            v-model="instance.parent_codes"
            :options="menuOptions"
            :props="{ checkStrictly: true }"
            clearable
            class="w-full"
          />
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="菜单类型" prop="menu_type">
          <ElRadioGroup v-model="instance.menu_type">
            <ElRadio label="M">目录</ElRadio>
            <ElRadio label="C">菜单</ElRadio>
            <ElRadio label="F">按钮</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem :col-props="{ xs: 24, sm: 12 }" label="菜单ID" prop="code">
          <ElInput v-model="instance.code" maxlength="50" type="number" :min="0" />
        </FormItem>

        <FormItem :col-props="{ xs: 24, sm: 12 }" label="菜单名称" prop="title">
          <ElInput v-model="instance.title" maxlength="50" />
        </FormItem>

        <FormItem :col-props="{ xs: 24, sm: 12 }" label="权限标识" prop="permissions">
          <ElInput v-model="instance.permissions" maxlength="100" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type !== 'F'"
          :col-props="{ xs: 24, sm: 12 }"
          label="路由名称"
          prop="name"
        >
          <ElInput v-model="instance.name" maxlength="50" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type !== 'F'"
          :col-props="{ xs: 24, sm: 12 }"
          label="路由地址"
          prop="path"
        >
          <ElInput v-model="instance.path" maxlength="200" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type !== 'F'"
          :col-props="{ xs: 24, sm: 12 }"
          label="组件路径"
          prop="component"
        >
          <ElInput v-model="instance.component" maxlength="200" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="高亮路由"
          prop="activeMenu"
        >
          <ElInput v-model="instance.activeMenu" maxlength="50" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="权限路由"
          prop="followAuth"
        >
          <ElInput v-model="instance.followAuth" maxlength="50" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type !== 'F'"
          :col-props="{ xs: 24, sm: 12 }"
          label="重定向路由"
          prop="redirect"
        >
          <ElInput v-model="instance.redirect" maxlength="50" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type !== 'F'"
          :col-props="{ xs: 24, sm: 12 }"
          label="图标"
          prop="icon"
        >
          <ElInput v-model="instance.icon" maxlength="50" />
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="是否缓存"
          prop="noCache"
        >
          <ElRadioGroup v-model="instance.noCache">
            <ElRadio :label="false">是</ElRadio>
            <ElRadio :label="true">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="面包屑显示"
          prop="breadcrumb"
        >
          <ElRadioGroup v-model="instance.breadcrumb">
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem
          v-if="instance.menu_type !== 'F'"
          :col-props="{ xs: 24, sm: 12 }"
          label="隐藏"
          prop="noCache"
        >
          <ElRadioGroup v-model="instance.hidden">
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'M'"
          :col-props="{ xs: 24, sm: 12 }"
          label="总是显示"
          prop="alwaysShow"
        >
          <ElRadioGroup v-model="instance.alwaysShow">
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="固定标签"
          prop="affix"
        >
          <ElRadioGroup v-model="instance.affix">
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="显示标签"
          prop="noTagsView"
        >
          <ElRadioGroup v-model="instance.noTagsView">
            <ElRadio :label="false">是</ElRadio>
            <ElRadio :label="true">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem
          v-if="instance.menu_type === 'C'"
          :col-props="{ xs: 24, sm: 12 }"
          label="可跳转"
          prop="canTo"
        >
          <ElRadioGroup v-model="instance.canTo">
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem :col-props="{ xs: 24, sm: 12 }" label="禁用" prop="disabled">
          <ElRadioGroup v-model="instance.disabled">
            <ElRadio :label="true">是</ElRadio>
            <ElRadio :label="false">否</ElRadio>
          </ElRadioGroup>
        </FormItem>

        <FormItem :col-props="{ span: 24 }" label="序号" prop="sequence">
          <ElInputNumber v-model="instance.sequence" controls-position="right" :min="1" />
        </FormItem>
      </ElRow>
    </ElForm>
  </ContentDetailWrap>
</template>
